<template>
  <view class="definite">
  <view style="background-color:#f3f5f7;">
    <u-navbar :is-back="true" :custom-back="BackM" title="我的订单" back-text="" > </u-navbar>
    <u-tabs-swiper ref="tabs" :list="list" active-color="#4dbf92" font-size="0.7rem" font-weight="500" count="count" height="80"
      :is-scroll="false" :current="current" bar-width="80" gutter="80" @change="tabsChange" ></u-tabs-swiper>
	  
    <view class="item-one" v-for="(item,index) in orderlists" :key="index">
		  <view class="item-time">
			<span style="padding-right: 0.5rem">{{item.createTime}}</span>
			<span style="float: right">{{orderStatusString(item).status}}</span>
		  </view>
		  
		  
		  <view class="item-content" v-for="(item1,index1) in item.orderDetailsList" :key="index1" @click="orderDetailClick(item)">
			
			<view class="image">
			  <image style="border-radius: 0.3rem;" :src="item1.posType.image" alt="" />
			</view>

			<view class="description">
				{{item1.posType.modelsName}}
			</view>

			<view class="item-two">
			  <view class="money" >¥ {{item1.price}}</view>
			  <view class="num">× {{item1.num}}</view>
			  <view class="num-total">共{{item1.num}}件</view>
			</view>
		  </view>
		  
		  
		  <view class="item-three">
			<span class="monney-total">合计：</span>
			<span class="red-money">¥ {{item.money}}</span>
			
			<view v-if="orderStatusString(item).btnOne.show" class="look" @click="clickBtn(orderStatusString(item).btnOne.name,item)">
			{{orderStatusString(item).btnOne.name}}</view>
			
			<view v-if="orderStatusString(item).btnTwo.show" class="cancle" @click="clickBtn(orderStatusString(item).btnTwo.name,item)">
			{{orderStatusString(item).btnTwo.name}}</view>
			
		  </view>
    </view>
	
	<!-- <u-loadmore v-show="loadmoreModal" :status="loadStatus" :load-text="loadText"/> -->
	<uni-load-more  @clickLoadMore="clickLoadMore"  :content-text="contentText" :status="status" ></uni-load-more>
	<!-- <u-empty   style="margin-top:0rem;" v-if="orderlists.length==0" text="暂无数据" mode="data"></u-empty> -->
	
	  </view>
  </view>
</template>

<script lang='ts' >
import { Component, Prop, Vue, Watch, Emit } from "vue-property-decorator";

import { orderList } from "../../../utils/uniApi";
import { cancelOrder } from "../../../utils/uniApi";
import { orderConfirmReceipt } from "../../../utils/uniApi";



import uNavbar from "@/uview-ui/components/u-navbar/u-navbar.vue";

import uTabsSwiper from "../../../uview-ui/components/u-tabs-swiper/u-tabs-swiper.vue";

import uniLoadMore from '../../loadMore/uni-load-more.vue'



@Component({
  //   @Component  是一个装修器   不可以在下面写语句
  name: "test",
  components:{
    'u-navbar':uNavbar,
	'u-tabs-swiper':uTabsSwiper,
	'uniLoadMore':uniLoadMore,
	
  }
})
export default class extends Vue {
  @Prop({
    type: String, // 父组件传递给子组件的数据类型
    required: false, // 是否必填
    default: " ", // 默认值， 如果传入的是 Object，则要 default: ()=>({}) 参数为函数
  })
  msg!: string;
  
  public orderlists:any=[];
  public current:any = 0;//当前tab
  public currentStatus:any='';//当前tab下订单状态
  public list = [
    {
      name: "我的订单",
      ate_count: 0,
    },
    {
      name: "待付款",
      ate_count: 1,
    },
    {
      name: "待发货",
      ate_count: 2,
    },
    {
      name: "待收货",
      ate_count: 3,
    },
	{
	  name: "已完成",
	  ate_count: 4,
	},
  ];
  
  public pageN: any = 1;//分页的页数
  //加载参数
  // public loadStatus = "nomore";
  // public loadText = {
  //   loadmore: "轻轻上拉",
  //   loading: "努力加载中",
  //   nomore: "暂无更多数据",
  // };
  // public loadmoreModal = true;
  public  status='more'
  
  public  contentText={
  					contentdown: '下拉或点击查看更多',
  					contentrefresh: '加载中',
  					contentnomore: '没有更多'
  				}
  public continueTypes = true;

  created() {}
  
  onShow(){
	  this.orderList(this.currentStatus,this.pageN);
  }
  
  onHide(){
  	  uni.hideLoading();
  }
  
  //下拉刷新
  onPullDownRefresh() {
      setTimeout(function () {
        uni.redirectTo({
          url: "../../../pages/item/myOrder/order",
        });
        uni.stopPullDownRefresh();
      }, 1000);
  }
  //上拉加载更多
  onReachBottom() {
	  if(!this.continueTypes){
	  		  return
	  }
    this.pageN = this.pageN + 1;
    this.orderList(this.currentStatus,this.pageN);
  }
  clickLoadMore(){
  	  this.onReachBottom()
  }

  mounted() {
    //  console.log('父组件传递的参数:',this.$parent)   //暂时不考虑
    //  uni.navigateTo({
    // url: './selectBusin'
    // });
  }
  
  tabsChange(index:any){
	  //订单状态 ( 空（null） : 全部，'0':待付款，'1':待发货,'2':待收货，'3':已完成)
	  console.log('输出tab切换：'+index)
	  this.current = index;
	  if(index<= this.list.length){
		  var item:any = this.list[this.current]
		  if(item.name=='我的订单'){
			  this.currentStatus = '';
		  }else if(item.name=='待付款'){
			  this.currentStatus = 0;
		  }else if(item.name=='待发货'){
			  this.currentStatus = 1;
		  }else if(item.name=='待收货'){
			  this.currentStatus = 2;
		  }else if(item.name=='已完成'){
			  this.currentStatus = 3;
		  }
		  this.pageN = 1;
		  this.orderList(this.currentStatus,this.pageN);
	  }
  }
  
  //订单状态转换 
  //status              0=创建;1=支付成功;2=确认收货;9=取消订单
  //type                类型，0，O单订单，1.购买设备订单，2 购买会员订单
  //logisticsStatus		发货状态（0 待发货 1 已发货）
  orderStatusString(item:any){
	  if(parseInt(item.type) == 2){
		  if(parseInt(item.status) == 0){
			  var dic = {status:'等待付款',btnOne:{show:true,name:'再次购买'},btnTwo:{show:true,name:'取消付款'},value:item}
			  return dic
		  }else if(parseInt(item.status) == 1){
			  var dic = {status:'交易成功',btnOne:{show:true,name:'查看物流'},btnTwo:{show:false,name:''},value:item}
			  return dic
		  }
	  }else if(parseInt(item.type) == 1){
		  if(parseInt(item.status) == 0){
			  var dic = {status:'等待付款',btnOne:{show:true,name:'再次购买'},btnTwo:{show:true,name:'取消付款'},value:item}
			  return dic
		  } else if (parseInt(item.status) == 1){
			  if(parseInt(item.logisticsStatus) == 0){
				  var dic = {status:'等待发货',btnOne:{show:true,name:'提醒发货'},btnTwo:{show:false,name:''},value:item}
				  return dic
			  }else if(parseInt(item.logisticsStatus) == 1){
				  var dic = {status:'等待收货',btnOne:{show:true,name:'确认收货'},btnTwo:{show:true,name:'查看物流'},value:item}
				  return dic
		      }
		  }else if (parseInt(item.status) == 2){
			  var dic = {status:'交易成功',btnOne:{show:true,name:'查看物流'},btnTwo:{show:false,name:''},value:item}
			  return dic
		  }else if (parseInt(item.status) == 9){//取消订单
			  var dic = {status:'',btnOne:{show:false,name:''},btnTwo:{show:false,name:''},value:item}
			  return dic
			  // return ''
		  }else{
			  var dic = {status:'',btnOne:{show:false,name:''},btnTwo:{show:false,name:''},value:item}
			  return dic
			  // return ''
		  }
	  }else if(parseInt(item.type) == 0){
		  var dic = {status:'',btnOne:{show:false,name:''},btnTwo:{show:false,name:''},value:item}
		  return dic
		  // return ''
	  }else{
		  var dic = {status:'',btnOne:{show:false,name:''},btnTwo:{show:false,name:''},value:item}
		  return dic
		  // return ''
	  }
  }
  //点击订单商品 进入详情页
  orderDetailClick(item:any){
	  uni.navigateTo({
	     url: '../waitForSending/index?order='+ encodeURIComponent(JSON.stringify(this.orderStatusString(item))),
	  });
  }
  //底部按钮点击事件
  clickBtn(name:any,item:any){
	  if(name == '再次购买'){
		  uni.navigateTo({
		    url: '../../buy/buy'
		  });
		  // var allMoney: any = 0.0;
		  // for (let entry of item.orderDetailsList) {
		  //   allMoney = allMoney + entry.num * entry.price;
		  // }
		  // let goodsDic = { list: item.orderDetailsList, all: allMoney.toFixed(2) };
		  // uni.navigateTo({
		  //   url:"../../order/sureOrder?goods=" + encodeURIComponent(JSON.stringify(goodsDic)),
		  // });
	  }else if(name == '查看物流'){
		  uni.navigateTo({
		     url: '../express/index?order='+ encodeURIComponent(JSON.stringify(this.orderStatusString(item))),
		  });
	  }else if(name == '提醒发货'){
		  uni.showToast({
			title: '提醒发货成功',
			icon: 'none',
			duration: 2000
		  });
	  }else if(name == '确认收货'){
		  this.orderConfirmReceipt(item.id)
	  }else if(name == '取消付款'){
		  this.cancelOrder(item.id)
	  }
  }
  
  //拉取我的订单
  orderList(status:any,page:any){
  	  uni.showLoading({
  	  	title: '加载中'
  	  });
  	  let params = {
		pageNo:page,
		pageSize:5,
		orderStatus:status,      //订单状态 ( 空（null） : 全部，'0':待付款，'1':待发货,'2':待收货，'3':已完成)
  		userId:uni.getStorageSync("userId") == ""? "": parseInt(uni.getStorageSync("userId")),
  	  };
  	  orderList(params).then((res: any) => {
  	    // console.log('++++++++++++++++++++我的设备商品品牌列表：' + JSON.stringify(res.data) )
  	      if(res.data.code==200){
  			  // uni.hideLoading();
  			  // this.orderlists = res.data.data
			  
			  var boolee = res.data.hasNext == false && this.continueTypes == false;
			  if (res.data.hasNext == true) {
			    this.status = "more";
			  } else {
			    this.status = "noMore";
			  }
			  
			  if (res.data.isFirst || !boolee) {
				if (res.data.hasNext == false) {
				  this.continueTypes = false;
				}
				if(this.orderlists.length>0 && this.pageN==1){//搜索和tab切换时  删除已有数据
				  this.orderlists = [];
				}
				this.orderlists = this.orderlists.concat(res.data.data)
				uni.hideLoading();
			  }
  			  
  	      }else{
  			  uni.hideLoading();
  			  uni.showToast({
  			  	title: '数据加载失败',
  			  	icon: 'none',
  			  	duration: 2000
  			  });
  	      }
  	  });
  }
  
  //取消付款
  cancelOrder(orderId:any){
  	  uni.showLoading({
  	  	title: '加载中'
  	  });
  	  let params = {
  		orderId:orderId,
  		userId:uni.getStorageSync("userId") == ""? "": parseInt(uni.getStorageSync("userId")),
  	  };
  	  cancelOrder(params).then((res: any) => {
  	    // console.log('++++++++++++++++++++订单 取消付款：' + JSON.stringify(res.data) )
  	      if(res.data.code==200){
  			  uni.hideLoading();
			  
			  this.orderlists.filter((item:any,index:any)=>{
					if(item.id==orderId){
						this.orderlists.splice(index,1)
					}
			  })
			  
			  uni.showToast({
			  	title: '取消付款成功',
			  	icon: 'none',
			  	duration: 2000
			  });
  	      }else{
  			  uni.hideLoading();
  			  uni.showToast({
  			  	title: '取消付款失败',
  			  	icon: 'none',
  			  	duration: 2000
  			  });
  	      }
  	  });
  }
  
  //确认收货
  orderConfirmReceipt(orderId:any){
  	  uni.showLoading({
  	  	title: '加载中'
  	  });
  	  let params = {
  		orderId:orderId,
  		userId:uni.getStorageSync("userId") == ""? "": parseInt(uni.getStorageSync("userId")),
  	  };
  	  orderConfirmReceipt(params).then((res: any) => {
  	    // console.log('++++++++++++++++++++订单 确认收货：' + JSON.stringify(res.data) )
  	      if(res.data.code==200){
  			  uni.hideLoading();
			  this.orderlists.filter((item:any,index:any)=>{
					if(item.id==orderId){
						this.orderlists.splice(index,1)
					}
			  })
  			  uni.showToast({
  			  	title: '确认收货成功',
  			  	icon: 'none',
  			  	duration: 2000
  			  });
  	      }else{
  			  uni.hideLoading();
  			  uni.showToast({
  			  	title: '确认收货失败',
  			  	icon: 'none',
  			  	duration: 2000
  			  });
  	      }
  	  });
  }
  
  //返回按钮
   BackM(){
  		// uni.navigateBack({
  		//    delta: 1,
  		// });
        uni.switchTab({
		url: '../../my/index'
    });

   }
}
</script>

<style  lang="scss"  scoped>
.definite {
  font-family: PingFang SC;
  background: #f3f5f7;
  height: 100%;
}
uni-page-body {
  height: 100%;
}
.item-one {
  margin: 0.5rem;
  background: #ffffff;
  border-radius: 0.3rem;
}
.item-time {
  padding: 0.6rem;

 
font-size: 0.68rem;
font-family: PingFang SC;
font-weight: 400;
color: #000000;
  border-bottom: 0.03rem #e5e5e5 solid;
}
.item-content {
  padding: 0.4rem;
  display: flex;
justify-content: space-between;
  font-family: PingFang SC;
  border-bottom: 0.03rem #e5e5e5 solid;
}
.image {
  float: left;
}
.image image {
  width: 3.6rem;
  height: 3.6rem;
}
.description {
  width: 5rem;
white-space: normal;
word-wrap: break-word;
}
.item-two {
  float: right;
  text-align: right;
  line-height: 1.23rem;
}
.money {
  
font-size: 0.74rem;
font-family: PingFang SC;
font-weight: 400;
color: #101010;
}
.num {
  font-size: 0.6rem;
  font-family: PingFang SC;
  font-weight: 400;
  color: #333333;
}
.num-total {
  font-size: 0.65rem;
  font-family: PingFang SC;
  font-weight: 400;
  color: #333333;
}
.item-three {
  padding: 0.8rem 0.5rem;
}
.money-total {
  height: 0.57rem;
  font-size: 0.6rem;
  font-family: PingFang SC;
  font-weight: 400;
  color: #000000;
  line-height: 1.06rem;
}
.red-money {
  font-size: 0.7rem;
  font-family: PingFang SC;
  font-weight: 500;
  color: #f91516;
}
.look,
.cancle {
  float: right;
  width: 3.73rem;
  height: 1.27rem;
  border-radius: 1rem;
  text-align: center;
  font-size: 0.7rem;
  font-family: PingFang SC;
  font-weight: 300;
  cursor: pointer;
  line-height: 1.17rem;
}
.look {
  border: 0.05rem solid #02af74;
  color: #02af74;
  margin-left: 0.6rem;
}
.cancle {
  border: 0.05rem solid #666666;
  color: #666666;
}
</style>